<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="操作时间" label-width="70px">
              <el-date-picker
                v-model="value"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateTimeChange"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="操作员工" label-width="70px">
              <el-input v-model="tableSearchParam.operationUser" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="登录日志" name="0">
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              style="width: 100%">
              <el-table-column
                label="操作员工"
                property="operationUser"
                width="80">
              </el-table-column>
              <el-table-column
                label="操作时间"
                property="operationTime"
                width="140">
              </el-table-column>
              <el-table-column
                property="operationIp"
                label="操作IP"
                width="120">
              </el-table-column>
              <el-table-column
                property="businessObjectType"
                label="业务对象类型"
                width="100">
              </el-table-column>
              <el-table-column
                property="operationType"
                label="操作类型"
                width="100">
              </el-table-column>
              <el-table-column
                property="operationObject"
                label="操作对象"
                width="100">
              </el-table-column>
              <el-table-column
                label="操作内容">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.operationContent != null && scope.row.operationContent.length > 50 ? scope.row.operationContent.substring(0, 50) + '...' : scope.row.operationContent}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-view"
                    type="success"
                    @click="viewData(scope.$index, scope.row)">查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="操作日志" name="1">
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              style="width: 100%">
              <el-table-column
                label="操作员工"
                property="operationUser"
                width="80">
              </el-table-column>
              <el-table-column
                label="操作时间"
                property="operationTime"
                width="140">
              </el-table-column>
              <el-table-column
                property="operationIp"
                label="操作IP"
                width="120">
              </el-table-column>
              <el-table-column
                property="businessObjectType"
                label="业务对象类型"
                width="100">
              </el-table-column>
              <el-table-column
                property="operationType"
                label="操作类型"
                width="80">
              </el-table-column>
              <el-table-column
                property="operationObjectName"
                label="操作对象"
                width="100">
              </el-table-column>
              <el-table-column
                label="操作内容">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.operationContent != null && scope.row.operationContent.length > 50 ? scope.row.operationContent.substring(0, 50) + '...' : scope.row.operationContent}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-view"
                    type="success"
                    @click="viewData(scope.$index, scope.row)">查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="日志详情" :visible.sync="dialogFormVisible" top="10vh">
      <el-row>
        <el-col :span="4" class="m-col">操作员工</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.operationUser}}</el-col>
        <el-col :span="4" class="m-col-left">操作时间</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.operationTime}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="m-col">操作IP</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.operationIp}}</el-col>
        <el-col :span="4" class="m-col-left">业务对象</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.businessObjectType}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="m-col">操作类型</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.operationType}}</el-col>
        <el-col :span="4" class="m-col-left">操作对象</el-col>
        <el-col :span="8" class="m-col-left">{{logData1.operationObjectName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="m-col-bottom">操作内容</el-col>
        <el-col :span="20" class="m-col-bottom-left">
          <div v-html="temLog">

          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .t-header {
    border: 1px solid #f2f2f2;
    background-color: #f8f8f8;
    height: 35px;
    font-size: 12px;
    font-weight: bold;
    line-height: 35px;
    padding-left: 32px
  }

  .t-body {
    margin-top: 10px;
    border: 1px solid #f2f2f2;
    background-color: #f8f8f8;
    font-size: 12px;
    padding-left: 12px
  }

  .el-checkbox + .el-checkbox {
    margin-left: 15px
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

</style>

<script>
  import logApi from '@/api/logApi'
  import ElRow from "element-ui/packages/row/src/row";

  export default {
    components: {ElRow},
    created() {
      this.initData()
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value: '',
        activeName: '0',
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          operationType: '0',
          operationUser: '',
          startTime: '',
          endTime: ''
        },
        dialogFormVisible: false,
        logData: [],
        logData1: {},
        temLog:''
      }
    },
    methods: {
      initData() {
        this.listTableData()
      },

      listTableData() {
        logApi.listLog(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          for (var t of this.tableData) {
            if (t.operationContent != null) {
              t.operationContent = t.operationContent;
            }
          }
          this.total = res.total
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      dateTimeChange(value) {
        if (value != null) {
          this.tableSearchParam.startTime = value[0]
          this.tableSearchParam.endTime = value[1]
        } else {
          this.tableSearchParam.startTime = ''
          this.tableSearchParam.endTime = ''
        }
      },
      handleTabClick(tab, event) {
        this.tableSearchParam.operationType = tab.index + '';
        this.tableSearchParam.starTime = ''
        this.tableSearchParam.endTime = ''
        this.tableSearchParam.operationUser = ''
        this.pageSize = 10
        this.currentPage = 1
        this.listTableData()
      },
      viewData(index, row) {
        let reg = new RegExp("\n", "g");
        for (var d of this.tableData) {
          if (d.id == row.id) {
            this.dialogFormVisible = true
            this.logData1 = d
            this.temLog = this.logData1.operationContent.replace(reg, '<br>')
            this.logData = []
            let ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作员工'
            ld.logContent = d.operationUser
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作时间'
            ld.logContent = d.operationTime
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作IP'
            ld.logContent = d.operationIp
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '业务对象'
            ld.logContent = d.businessObjectType
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作类型'
            ld.logContent = d.operationType
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作对象'
            ld.logContent = d.operationObjectName
            this.logData.push(ld)
            ld = {
              logItem: '',
              logContent: ''
            }
            ld.logItem = '操作内容'
            ld.logContent = d.operationContent.replace(reg, '<br>')
            this.logData.push(ld)
            break
          }
        }
      }
    }
  }
</script>
